<template>
	<!-- <view class="full-page" v-if="totalPage">
		
	</view> -->
	<view class="content222" >
		<block v-if="noNetwork">
			<view class="display-flex" style="padding-top: 166px;justify-content: center;">
				<image src="/static/images/network.png" mode="aspectFit" style="width: 152px;height: 170px;"></image>
			</view>
		</block>
		<block v-else>
			<!-- #ifndef MP-WEIXIN -->
			<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" :style="{opacity: showLogin ? 0 : 1}">
				<view slot="left">
					<view class="display-flex fix-nav">
						<view @click="navIndex=0" :class="navIndex==0?'active':''">
							发现广场
						</view>
						
						<!-- <view @click="navIndex=1" :class="navIndex==1?'active':''">
							关注动态
						</view> -->
					</view>
				</view>
				<view slot="right">
					<image :src="'/images/search.png' | formatImgUrl" mode="aspectFit" style="width: 16px;height: 16px;" @click="$go('/pages/find/search')"></image>
				</view>
			</u-navbar>
			<!-- #endif -->
			
			<view v-if="show1" class="biaoqian">
				<view class="top">减少标签下内容推荐</view>
				<view class="tab">
					<view  v-for="(item,index) in act_info.tags" >#{{item}}</view>
				</view>
				
				<view class="not_like" v-if="act_info.tags.length>0">
					不喜欢的标签可在“设置”中彻底屏蔽
				</view>
				<view class="not_like" v-else>
					该内容未绑定任何标签
				</view>
				<view class="line">
				</view>
				<view class="cont_t display-flex" :class="act_info.tags.length == 0 ? 'cont_t-gray' : ''">
					<view class="t1 display-flex" @click="no_like(1)" >
						<image :src="'/images/home_book.png' | formatImgUrl" mode="" v-if="act_info.tags.length > 0"></image>
						<image :src="'/images/home_book1.png' | formatImgUrl" mode="" v-else></image>
						<view class="tex">
							内容不感兴趣
						</view>
					</view>
				</view>
				<view class="cont_b display-flex">
					<view class="t1 display-flex" @click="no_like(2)">
						<image :src="'/images/home_man.png' | formatImgUrl" mode=""></image>
						<view class="tex">
							作者不感兴趣
						</view>
					</view>
					
				</view>
				<image class="cl1" @click="show1=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>
			<view v-if="show1" @click="show1=false" class="zhezhao">
			</view>
			
			<view class="topbox"  :style="'margin-bottom:'+(!myGroupList.total?'0':'20') + 'rpx !important'">
				<!-- #ifdef MP-WEIXIN -->
				<view class="serbox" @click="$go('/pages/find/search')">
					<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
					<input type="text" disabled="true" class="serput" placeholder="搜圈子、用户、内容">
				</view>
				<!-- #endif -->
				
				<view v-if="myGroupList.total && $db.get('auth')">
					<view class="qbox pb20 pb20_1">
						<view class="qline"></view>
						<view class="qtitle">
							我的圈子
						</view>
					</view>
					<view class="zibox">
						<view class="zili" v-for="item in myGroupList.data" @click="$go('/pages/find/circledetail?id='+item.group.id)">
							<image :src="item.group.img | formatImgUrl" class="zihead" mode=""></image>
							<view class="zitxt">
								{{item.group.name}}
							</view>
						</view>
					</view>
				</view>
			
			</view>
			
			<view class="topbox" v-if="hotList.total">
				<view class="qbox pb20">
					<view class="qline"></view>
					<view class="qtitle">
						热门圈子
					</view>
					<view class="seemore" @click="$go('/pages/find/circle')">
						查看更多
					</view>
				</view>
				<view class="hotbox">
					<view class="houli" v-for="item in hotList.data" @click="$go('/pages/find/circledetail?id='+item.id)">
						<image :src="item.img | formatImgUrl" class="hothead" mode=""></image>
						<view class="zitxt">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="topbox hotlist" style="padding-top: 0;">
				<view class="qbox pb20" :class="isF ? 'sticky-fixed' : ''" style="padding-top: 10px;">
					<view class="qline"></view>
					<view class="qtitle">
						<text v-if="order_type==1">热门精选</text>
						<text v-if="order_type==2">最新发布</text>
					</view>
				
					<view class="tuiyou"  @click="qiehuan()">
						<image :src="'/images/qh1.png' | formatImgUrl" class="tuipic" mode="" v-if="order_type==1"></image>
						<image :src="'/images/qh2.png' | formatImgUrl" class="tuipic" mode="" v-if="order_type==2"></image>
						<view class="tuitxt">
								切换排序
						</view>
					</view>
				</view>
				<view class="empytView" v-if="!articleList.length">
								<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
								<!-- <view>- 空列表 -</view> -->
				</view>
				<dLoading :status="loadingnew" v-if="!loadEnd"></dLoading>
				
				<!-- <custom-waterfalls-flow :value="data.list"> -->
					 <custom-waterfalls-flow  ref="waterfallsFlowRef" v-if="articleList.length>0" :value="articleList"  @imageClick="imageClick">
						
						    <!-- #ifdef MP-WEIXIN -->
					        <view class="item" v-for="(item,index) in articleList" :key="index" slot="slot{{index}}"  @click="$go('/pages/find/content?id='+item.id)"> 
								<view v-if="item.image=='https://cdnauth.dreamyuewen.com/images/f1.jpg'" class="emptyImg ">
									<view class="destxt lines">
										{{item.desc}}
									</view>
								</view>
								<view class="cnt">
									<view class="carbox">
										<view class="numtxt" v-if="JSON.parse(item.img).length">
											{{JSON.parse(item.img).length}}
										</view>
										<view class="title oneline" @tap.stop="$go('/pages/find/content?id='+item.id)">{{item.title}}</view>
										
										<image :src="'/images/ju1.png' | formatImgUrl" @tap.stop="aid=item.id,act_info=item,show1 = true" class="jupic"
											mode=""></image>
									</view>
									
									<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;">
										<view class="qli" v-for="(item1,index1) in item.tags">
											#{{item1}}
										</view>
									</scroll-view>
									
									
									<view class="haobox">
										<!-- <view class="wen" v-if="item.hot">
											{{$db.get('config').diy_hot_label}}
										</view>
										<view class="wen" v-if="item.sift">
											{{$db.get('config').diy_sift_label}}
										</view>
										<view class="wen" v-if="(!item.hot || !item.sift) && item.gid">
											{{item.gid?item.qz:'默认圈子'}}
										</view> -->
										
										<!-- v-if="!item.gid && !item.hot && !item.sift" -->
										<view style="display: flex;justify-content: flex-start;align-items: center;">
											<image :src="item.pic | formatImgUrl"
												style="width: 45rpx;height: 45rpx;border-radius: 100px;" mode="aspectFill"></image>
											<text
												style="font-size: 24rpx;padding-left: 8rpx;color: #999;width: 165rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.username}}</text>
										</view>
										<view class="display-flex">
											<!-- <view class="ybox mr10">
												<image src="/static/images/tc.png"
													class="hart"></image>
												<view class="ytxt">
													{{item.remark_num}}
												</view>
											</view> -->
											<view class="ybox">
												 <!-- @tap.stop="userLike(1,item.id,index)" -->
												<image :src="(item.isLiked ? '/images/zz1.png' : '/images/zz.png') | formatImgUrl"
													class="hart" style="width: 36rpx;height: 36rpx;"></image>
												<view :style="{color: item.isLiked ? '#43DC71' : '#999'}">
													{{item.like_num || '点赞'}}
												</view>
											</view>
										</view>
										
									</view>
								</view>
					        </view>
							<!-- #endif -->
							
							<!-- #ifndef MP-WEIXIN -->
							<template v-slot:default="item">
								<view class="item"  @click="$go('/pages/find/content?id='+item.id)"> 
									<view v-if="item.image=='https://cdnauth.dreamyuewen.com/images/f1.jpg'" class="emptyImg ">
										<view class="destxt lines">
											{{item.desc}}
										</view>
									</view>
									<view class="cnt">
										<view class="carbox">
											<view class="numtxt" v-if="JSON.parse(item.img).length">
												{{JSON.parse(item.img).length}}
											</view>
											<view class="title oneline" @tap.stop="$go('/pages/find/content?id='+item.id)">{{item.title}}</view>
											
											<image :src="'/images/ju1.png' | formatImgUrl" @tap.stop="aid=item.id,act_info=item,show1 = true" class="jupic"
												mode=""></image>
										</view>
										
										<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;">
											<view class="qli" v-for="(item1,index1) in item.tags">
												#{{item1}}
											</view>
										</scroll-view>
										
										<view class="haobox">
											<!-- <view class="wen" v-if="item.hot">
												{{$db.get('config').diy_hot_label}}
											</view>
											<view class="wen" v-if="item.sift">
												{{$db.get('config').diy_sift_label}}
											</view>
											<view class="wen" v-if="(!item.hot || !item.sift) && item.gid">
												{{item.gid?item.qz:'默认圈子'}}
											</view> -->
											
											<!-- v-if="!item.gid && !item.hot && !item.sift" -->
											<view style="display: flex;justify-content: flex-start;align-items: center;">
												<image :src="item.pic | formatImgUrl"
													style="width: 45rpx;height: 45rpx;border-radius: 100px;" mode="aspectFill"></image>
												<text
													style="font-size: 24rpx;padding-left: 8rpx;color: #999;width: 165rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.username}}</text>
											</view>
											<view class="display-flex">
												<!-- <view class="ybox mr10">
													<image src="/static/images/tc.png"
														class="hart"></image>
													<view class="ytxt">
														{{item.remark_num}}
													</view>
												</view> -->
												<view class="ybox">
													 <!-- @tap.stop="userLike(1,item.id,index)" -->
													<image :src="(item.isLiked ? '/images/zz1.png' : '/images/zz.png') | formatImgUrl"
														class="hart" style="width: 36rpx;height: 36rpx;"></image>
													<view class="ytxt" :style="{color: item.isLiked ? '#43DC71' : '#999'}">
														{{item.like_num || '点赞'}}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>
							<!-- #endif -->
								 
					    </custom-waterfalls-flow>
				
				<!-- <uni-load-more :status="status"></uni-load-more> -->
			</view>
		</block>
		
		<!-- <tabbar activeIdx='1'></tabbar> -->


		<!-- 举报弹框 -->
		<u-popup :show="show" @close="close" @open="open">
			<view class="mask">
				<view class="matop" @click="goToreport">
					<image :src="'/images/jing.png' | formatImgUrl" class="mapic" mode=""></image>
					<view class="matxt">
						举报
					</view>
					<image :src="'/images/rarr.png' | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
		</u-popup>
		  <!-- <dLoading :status="loading"></dLoading> -->
		
		<u-popup mode="bottom" :show="showLogin" @close="showLogin=false">
			<view class="pop-login display-flex">
				<view class="pop-close"  @tap.stop="showLogin=false">
					<image :src="'/images/pop-close.png' | formatImgUrl" class="" mode=""></image>
				</view>
				
				
				<view class="pop-title">
					登录发现遇到灵感
				</view>
				<image :src="'/images/pop-logo.png' | formatImgUrl" class="pop-logo" mode=""></image>
				<view class="pop-btn" @click="showLogin=false,$goLogin('/pages/login/phone')">
					手机号码登录
				</view>
				<view class="pop-btn" @click="showLogin=false,$goLogin('/pages/login/account')">
					账号密码登录
				</view>
				<view class="xiebox" @click="isRead =( isRead == 2?0:2)" :class="isRead == 1 ? 'shake-horizontal' : ''">
					<label>
						<u-checkbox shape="circle" size="14" :checked="isRead" activeColor="#45C4B0" inactiveColor="#999" @change="changeBox"></u-checkbox>
					</label>
					<view class="xietxt">
						我已阅读并同意：<text @click.stop="goToxie">《服务协议》</text>和<text @click.stop="goToOtherxie(14)">《隐私政策》</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import * as db from '@/common/db.js'
	// import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	// import dLoading from '@/uni_modules/d-loading/components/d-loading/d-loading.vue'
	import uniLoadMore from '@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			// waterfallsFlow,
			// dLoading
			uniLoadMore
		},
		onPullDownRefresh() {
			setTimeout(function() {
					uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
				console.log('refresh');
				this.page = 1;
				this.articleList = [];
				this.list = [];
				this.$refs.waterfallsFlowRef.refresh();
				this.getGroupArticle();
		},
		data() {
			return {
				show1:false,
				loading:false,
				// 举报弹框
				show: false,

				myGroupList: {},
				hotList: {},
				
				// 瀑布流
				list: [],
				articleList: {},
				page: 1,
				aid: 0,
				timeStamp:"",
				act_info:null,
				order_type:1,
				noNetwork: false,
				navIndex: 0,
				status: 'loading',
				totalPage: true,
				loadEnd: false,
				isF: false,
				isRead: false,
				showLogin: false,
				loadingnew: true
			}
		},
		onLoad() {
			// if (true) {
			// 	setTimeout(function(){
			// 		that.loading = false
			// 	},1000)
			// }
			
			if(db.get('auth')){
				this.getMyList()
			}
			
			this.getHotList()
			// this.getGroupArticle();

		},

		onShow() {
			if(!db.get('auth')){
				this.myGroupList = {}
			}
			
			if(db.get('auth') && !this.myGroupList){
				this.getMyList()
			}
			
			// if(this.articleList.length == 0){
				this.page = 1;
				// this.articleList = [];
				// this.list = [];
				this.getGroupArticle();
			// }
			
			
			if(!this.hotList){
				this.getHotList()
			}
			
			this.getNetworkType()
		},
		// 上拉加载
		onReachBottom() {
		
			if (this.list.current_page < this.list.last_page) {
		
				this.page++; // 页数加一，加载下一页数据
				this.getGroupArticle();
			}
		},
		onPageScroll(e){
			if (e.scrollTop < 350 ) {
			    this.isF = false
			} else {
			    this.isF = true
			}
		},
		// onTabItemTap(e){
		// 	console.log(e,111);
			
		// 	if(!db.get('auth')){
		// 		this.showLogin = true
		// 	}
		// },
		methods: {
			changeBox(e){
				this.isRead = e ? 2 : 0
			},
			getNetworkType() {
			   	uni.getNetworkType({
			   		success:(res) =>{
						if(res.networkType == "none"){
							this.noNetwork = true
							this.$common.errorToShow('您当前处于离线状态')
						}
			   		},
					fail: (err) => {
						console.log(err,111);
					}
			   	});
			},
			qiehuan(){
				this.loadEnd = false
				this.order_type = this.order_type==1?2:1
				
				
				this.page = 1;
				this.articleList = [];
				this.list = [];
				this.$refs.waterfallsFlowRef.refresh();
				this.getGroupArticle();
		
			},
			no_like(type){
				let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				
				
				if(type == 1 && this.act_info.tags.length<=0){
						this.$common.errorToShow("该文章没有标签")
						return
				}
				
				if(type == 2 && this.act_info.username == this.$db.get('userInfo').username){
					this.$common.errorToShow("无法屏蔽自己噢~")
					return
				}
				
				
				this.$api.default.request('user/no_like',{type:type,id:this.act_info.id}).then((res) => {
					if (res.code) {
						this.$common.errorToShow("已为您减少相关推荐")
						this.show1 = false;
						
						this.page = 1;
						this.articleList = [];
						this.getGroupArticle()
					}
				})
			},
			 imageClick(item) {
				 let auth = db.get('auth');
				 if (!auth) {
				 	uni.navigateTo({
				 		url: '/pages/login/login'
				 	})
				 	return;
				 }
				 
				 //go('/pages/find/content?id='+item.id)
				 uni.navigateTo({
				 	url:'/pages/find/content?id='+item.id
				 })
			            
			   },
			userLike(type = 1, id,index) {
				let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
					// console.log(66666666,this.articleList[index]);
					// if(!this.articleList[index].isLiked){
					// 	this.articleList[index].isLiked = true;
					// }else{
					// 	this.articleList[index].isLiked = false;
					// }
				
				
				// console.log(77777777777,this.articleList[index]);
				// console.log(id,999999999); //is_like
				// return
				this.$api.default.request('user/likeArticle', {
					id: id,
					type: type
				}, 'POST', false).then((res) => {
					if (res.code) {
						// this.page = 1
						this.getGroupArticle()
					}
				})
			},
			getMyList() {
				this.$api.default.request('Discover/myList','','POST',false).then((res) => {
					if (res.code) {
						console.log(res.data,777);
						this.myGroupList = res.data
					}
				})
			},
			getHotList() {
				this.$api.default.request('Discover/hotList','','POST',false, {
					hot: 1,
					limit: 4
				}).then((res) => {
					if (res.code) {
						console.log(res.data,666);
						this.hotList = res.data
					}
				})
			},
			getGroupArticle() {
		
				// this.loading = true
				
				var that = this
				
				this.$api.default.request('Discover/groupArticle1',{page:this.page,timeStamp: Math.floor(this.timeStamp/1000),type:this.order_type},'POST',false).then((res) => {
					if (res.code) {
						this.list = res.data
						if (res.data.current_page > 1) {
							
							// res.data.data.forEach((item) => {
								
							// 		that.articleList.push(item)
							
							// })
							this.articleList = this.articleList.concat(res.data.data);
						} else {
							this.articleList = res.data.data
						}
						
						if(res.data.data.length == 0){
							this.status = "noMore"
						}
						
						this.loadEnd = true
						this.totalPage = false
					}
				})
			},

			toggleLike(index) {
				this.list[index].isLiked = !this.list[index].isLiked
			},
			// 举报弹框
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
			},
			goToreport() {
				this.show = false
				uni.navigateTo({
					url: '/pages/find/report?id=' + this.aid
				})
			}
		}
	}
</script>

<style lang="scss">
	.sticky-fixed {
		   /* #ifndef MP-WEIXIN */
		   position: sticky;
		   top: 88px;
		   /* #endif */
	       /* #ifdef MP-WEIXIN */
		   position: sticky;
	       top: 0;
	       /* #endif */
		   width: 100%;
	        z-index: 999;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
	    }
	
	
	// /deep/.column-value .img{
	// 	max-height: 600rpx;
	// }
	
	.fix-nav{
		align-items: flex-end;
		
		view{
			color:#999;font-size:16px;margin-right: 25rpx;
		}
		
		.active{
			color:#3D3D3D;font-weight:700;font-size:20px;
		}
	}
	
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content222 {
		.tuiyou {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		
			.tuipic {
				width: 36rpx;
				height: 36rpx;
			}
		
			.tuitxt {
				font-size: 28rpx;
				color: #999999;
				padding-left: 10rpx;
			}
		}
		.lines{
			// max-height: 400rpx;
			// text-overflow:ellipsis;
			font-family: '思源黑体';
			font-size: 10px;
			color: #3D3D3D;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 6;
			-webkit-box-orient: vertical;
		
		}
		.topbox {
			padding: 20rpx 30rpx 0;
			background-color: #ffffff;
			margin-bottom: 20rpx;

			.serbox {
				display: flex;
				align-items: center;
				background: #F8F8F8;
				border-radius: 142px;
				height: 72rpx;
				padding: 0 26rpx;

				.serpic {
					width: 32rpx;
					height: 32rpx;
					flex-shrink: 0;
				}

				.serput {
					padding: 0 16rpx;
					width: 500rpx;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.pb50 {
				padding-bottom: 50rpx;
			}

			.pb20 {
				padding-bottom: 20rpx;
			}

			.qbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;

				.qline {
					width: 4rpx;
					height: 28rpx;
					border-radius: 42px;
					opacity: 1;
					background: #45C4B0;
					flex-shrink: 0;
				}

				.qtitle {
					padding: 0 12rpx;
					flex-grow: 1;
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.seemore {
					font-size: 28rpx;
					font-weight: normal;
					text-align: center;
					letter-spacing: 0em;
					color: #999999;
				}
				
			
				
			
			}
			.pb20_1{
				// padding-top: 15px;
			}
			.zibox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.zili {
					text-align: center;
					margin-right: 40rpx;
					margin-bottom: 20rpx;

					.zihead {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin: 0 auto;
						box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
					}

					.zitxt {
						font-size: 28rpx;
						font-weight: bold;
						color: #3D3D3D;
						padding-top: 12rpx;
						
					}
				}
			}

			.hotbox {
				display: flex;
				align-items: center;

				.houli:last-child {
					margin-right: 0;
				}

				.houli {
					text-align: center;
					margin-right: 44rpx;
					margin-bottom: 16rpx;

					.hothead {
						width: 140rpx;
						height: 140rpx;
						border-radius: 12px;
						margin: 0 auto;
						box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
					}

					.zitxt {
						font-size: 28rpx;
						font-weight: bold;
						color: #3D3D3D;
						padding-top: 12rpx;
					}
				}
			}

			.numtxt {
				color: #ffffff;
				font-size: 20rpx;
				position: absolute;
				right: 0rpx;
				top: -50rpx;
				min-width: 16px;
				height: 16px;
				line-height: 16px;
				text-align: center;
				background: rgba(51, 51, 51, 0.9);
				border-radius: 50%;
			}

			.cnt {
				padding: 8rpx 12rpx 20rpx;

				.carbox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 8rpx;
					position: relative;

					.title {
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0em;
						color: #3D3D3D;
					}

					.jupic {
						width: 36rpx;
						height: 36rpx;
						flex-shrink: 0;
					}
				}

				.qli {
					background: rgba(153, 153, 153, 0.102);
					padding: 2px 8px 2px 6px;
					border-radius: 89px;
					font-family: 思源黑体;
					font-size: 12px;
					// font-weight: bold;
					color: #999;
					display: inline-block;
					margin-bottom: 16rpx;
					margin-right: 16rpx;
				}

				.haobox {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.wen {
						padding: 2rpx 8rpx;
						background: rgba(243, 122, 165, 0.15);
						border-radius: 4px;
						margin-right: 8rpx;
						flex-shrink: 0;
						font-size: 20rpx;
						letter-spacing: 0.08em;
						color: #F37AA5;
					}

					.ybox {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						flex-grow: 1;
						.hart {
							width: 32rpx;
							height: 32rpx;
						}

						.ytxt {
							font-size: 20rpx;
							text-align: right;
							letter-spacing: 0.08em;
							color: #999;
							margin-left: 2rpx;
						}
						
						
					}
				}

			}
		}

		.hotlist{
			min-height: 100vh;
			// margin-bottom: -20rpx;
			padding-bottom: 160rpx;
		}
		.mask {
			background: #F2F5F2;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			overflow: hidden;

			.matop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 68rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				background-color: #ffffff;

				.mapic {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}

				.matxt {
					flex-grow: 1;
					font-size: 28rpx;
					padding: 0 16rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
			}

			.qubox {
				line-height: 120rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				height: 120rpx;
				opacity: 1;
				background: #FFFFFF;
			}
		}
		.emptyImg {
			padding: 12rpx;
			background: #F2F5F2;
			border-radius: 8px;
		
		}
		
		.cl1{
				height: 48rpx;
				width: 48rpx;;
				position: relative;
				top:110rpx;
		}
		.zhezhao{
			height: 100vh;
			position: fixed;
			top:0rpx;
			right:0px;
			width: 100%;
			z-index:99999;
			background: rgba(51, 51, 51, 0.6);
		}
		.biaoqian{
			position: fixed;
			float: left;
			top:50%;
			transform: translateY(-50%);
			z-index:100000;
			border-radius: 0.5em;
			background: #fff;
			width: 70%;
			margin-left: 15%;
			text-align: center;
			.top{
				padding-top: 50rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #000;
				float: left;
			    text-align: center;
				width: 80%;
				margin-left: 10%;
			}
			
			.tab{
				padding-top: 10rpx;
				font-size: 21rpx;
				font-weight: 600;
				width:90%;
				margin-left: 5%;
				float: left;
				text-align: center;
				view{
					background: rgba(153, 153, 153, 0.2);
					padding: 2rpx 20rpx 2rpx 20rpx;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
					margin-top: 10rpx;
				}
			}
			
			.not_like{
				width: 100%;
				text-align: center;
				float: left;
				color:#999;
				font-size: 27rpx;
				margin-top:40rpx;
			}
			
			.line{
				margin-top:30rpx;
				width:88%;
				margin-left:6%;
				margin-bottom: 40rpx;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}
			.cont_t{
				border-radius: 8px;
				opacity: 1;
				background: rgba(69, 196, 176, 0.05);
				width: calc(100% - 80rpx);
				margin: 0 auto;
				// margin-top: 40rpx;
				color: #45C4B0;
				justify-content: center;
				
				.t1{
					
					height: 86rpx;
					image{
						width:33rpx;;
						height: 33rpx;
					}
					.tex{
						 margin-left: 10rpx;
					}
				}
			
			}
			
			.cont_t-gray{
				background: #F2F5F2;
				color: #999;
			}
			.cont_b{
				width: calc(100% - 80rpx);
				margin: 0 auto;
				margin-top: 20rpx;
				background: rgba(69, 196, 176, 0.05);
				color: #45C4B0;
				justify-content: center;
				
				.t1{
					height: 86rpx;
					justify-content: center;
					
					image{
						width:33rpx;;
						height: 33rpx;
					}
					.tex{
						 white-space: nowrap;
						 margin-left: 10rpx;
					}
				}
				
				
			}
		}
	}
</style>